@charset "utf-8";
@import "reset";
$fontsize:40;
@function r($px) {
    @return $px/$fontsize * 1rem
}

* {
    margin: 0;
    padding: 0;
    list-style: none;
}

html,
body {
    width: 100%;
    height: 100%;
}

.web {
    width: 100%;
    height: 100%;
    position: relative;
    >header {
        width: 100%;
        height: r(87);
        position: absolute;
        top: 0;
        background: #f7f7f7;
        margin: 0 auto;
        border-bottom: r(1) solid #c1c1c1;
        padding: 0 r(20);
        .img{
            float: left;
            margin-top: r(20);
            width: r(22);
            height: r(37);
            img{
                width: 100%;
                height: 100%;
            }
        }
        .nav {
            width: 65%;
            height: r(60);
            line-height: r(56);
            border: r(2) solid #d62d31;
            border-radius: r(6);
            margin: r(13) auto 0;
            font-size: 0;
            span {
                display: inline-block;
                width: 50%;
                height: r(57);
                text-align: center;
                a {
                    letter-spacing: r(3);
                    font-size: r(28);
                    color: #d62d31;
                }
            }
            span.active {
                background: #d62d31;
                a {
                    color: #ffffff;
                }
            }
        }
        .letter {
            float: right;
            line-height: r(86);
            position: relative;
            img{
                width: r(40);
                height: r(40);
            }
        }
        .letter:after {
            content: "";
            position: absolute;
            right: r(-7);
            top: r(13);
            width: r(10);
            height: r(10);
            border-radius: 50%;
            background: #cc3333;
        }
    }
    
    #big {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 99;
        display: none;
        .click {
            position: absolute;
            top: r(160);
            left: r(45);
            width: r(540);
            height: r(695);
            margin: 0 auto;
            background: #f8f8f8;
            border-radius: r(20);
            z-index: 999;
            p {
                width: 50%;
                margin: 0 auto;
                text-align: center;
                font-size: r(35);
                color: #333333;
                padding: r(40);
            }
            form {
                width: 100%;
                text-align: center;
                .type {
                    margin: 0 auto;
                    width: r(490);
                    height: r(60);
                    line-height: r(58);
                    background: #FFFFFF;
                    border: r(1) solid #c1c1c1;
                    border-radius: r(8);
                    font-size: 0;
                    margin-bottom: r(27);
                    span {
                        display: inline-block;
                        font-size: r(26);
                        vertical-align: top;
                        color: #333333;
                        width: r(100);
                        margin: 0 r(10);
                    }
                    input {
                        width: r(360);
                        height: r(57);
                        border: none;
                        vertical-align: top;
                        font-size: r(26);
                    }
                }
                .t2 {
                    span {
                        width: r(140);
                    }
                    input {
                        width: r(320);
                    }
                }
                .t3 {
                    span {
                        width: r(120);
                    }
                    input {
                        width: r(340);
                    }
                }
                .t4{
                    height: r(130);
                    margin-bottom: r(62);
                    textarea {
                    width: r(482);
                    height: r(122);
                    resize: none;
                    border: none;
                    background: #FFFFFF;
                    font-size: r(26);
                    padding: r(15);
                    vertical-align: top;
                }
                }
                input[type="button"] {
                    width: r(365);
                    height: r(80);
                    background: #cc3333;
                    border-radius: r(10);
                    font-size: r(30);
                    color: #FFFFFF;
                    text-align: center;
                }
            }
        }
    }
    #small{
        position: absolute;
        top: r(300);
        left: r(196);
        display: none;
        width: r(249);
        height: r(183);
        text-align: center;
        padding-top: r(32);
        background: rgba(0,0,0,0.5);
        border-radius: r(18);
        z-index: 99;
        img{
            width: r(69);
            height: r(69);
            margin-bottom: r(25);
        }
        p{
            width: 100%;
            text-align: center;
            font-size: r(22);
            color: #FFFFFF;
        }
    }
    
    >section {
        width: 100%;
        height: r(1140);
        position: absolute;
        top: r(87);
        bottom: r(0);
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        .sup{
            height: r(470);
            text-align: center;
            img{
                width: r(540);
                height: r(430);
            }
        }
        .text{
            padding-left: r(56);
            padding-right: r(20);
            p{
                font-size: r(26);
                color: #666666;
            }
        }
        .a{
            width: r(440);
            height: r(80);
            line-height: r(80);
            margin: r(46) auto 0;
            text-align: center;
            background: #d62d31;
            border-radius: r(9);
            a{
                display: inline-block;
                color: #ffffff;
                font-size: r(35);
            }
            
        }
    }    
}